<template>
	<view class="all">
		<view class="search">
			<uni-search-bar @confirm="search" @input="input" placeholder="请输入" bgColor="#EFEFF4" :radius="100"></uni-search-bar>
		</view>
		<view class="kong"></view>
			<view class="now">
				<view class="nandu">序号</view>
				<view class="timu">题目</view>
				<view class="nandu">难度</view>
				<view class="daan">答案</view>
				<view class="caozuo">操作</view>
			</view>
		
		<view v-for="(item,index) in items" :key='item.id' class="now-exam">
			<view class="xuhao">{{item.id}}</view>
			<view class="exam">{{item.title}}</view>
			<view class="name">{{item.difficult}}</view>
			<view class="name">{{item.answer}}</view>
			<view><button  class="shanchu" @click="del(index)">删除</button></view>
			<view><button  class="enter">添加</button></view>
		</view>
		<view class="hui"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					{
						title:'一个完整的计算机系统包括____。',
						difficult:'简单',
						answer:'B',
						id:'0',
						scr:'../../../static/考试.png'
						
					},
					{
						title:'微型计算机的运算器、控制器及内存储器的总称是____。',
						difficult:'简单',
						answer:'D',
						id:'1',
						scr:'../../../static/exam.png'
					},
					{
						title:'长城386微机”中的“386”指的是____。',
						difficult:'较难',
						answer:'A',
						id:'2',
						scr:'../../../static/exam.png'
					},
					
				],
				
			}
		},
		methods: {
			del(a){
			   this.items.splice(a,1)
			       }
		}
	}
</script>

<style >
	.zll{
		height: 95vh;
		width: 100%;
		background-color: #EFEFF4;
	}
	.search{
		border-radius: 37rpx;
	}
	.kong {
		height: 60rpx;
		width: 100%;
		/* background-color: #FFFFFF; */
	}
	.now{
		height: 80rpx;
		width: 100%;
/* 		background-color:#EFEFF4; */
		display: flex;
/* 		flex-direction: column; */
		justify-content: space-between;
		align-items: center;
		
	}
	.zi{
		height: 50%;
		width: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.former{
		height: 80rpx;
		width: 100%;
/* 		background-color:#EFEFF4; */
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.now-exam{
		height: 130rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border: 2rpx #bbbbbb solid;
	}
	.icon{
		height: 60rpx;
		width: 60rpx;
	}
	button{
		background-color: #12754F;
		color: #FFFFFF;
		font-size: small;
	}
	.hui{
		width: 100%;
		height:500rpx;
/* 		background-color: #EFEFF4; */
	}
	.shanchu{
		background-color: #cb0000;
		border-radius: 25rpx;
	}
	.exam{
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.xuhao{
		background-color: #1cba7b;
		width: 40rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}
	.timu{
		width: 35%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.nandu{
		display: flex;
		flex-direction: row;
		align-items: center;

	}
	.daan{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.caozuo{
		width: 35%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.search{
		color: #FFFFFF;
	}
	.enter{
		margin-right: 10rpx;
	}
</style>
